<script>
import store from "@/store";
import {mapActions, mapGetters, mapMutations} from "vuex";

export default {
  data() {
    return {
      size: '',
      copySuccess: false
    };
  },
  computed: {
    ...mapGetters(['getDetails', 'getShowDeadline'])
  },
  methods: {
    ...mapActions([]),
    ...mapMutations(['SET_SHOW_DEADLINE']),
    async copyTextWrite(el) {
      try {
        // 构建要复制的文本内容
        let texts = '';
        el.querySelectorAll('li').forEach((item) => {
          texts += `${item.innerText}\n`;
        });

        // 使用现代剪贴板API
        await navigator.clipboard.writeText(texts.trim());

        // 显示复制成功反馈
        this.copySuccess = true;
        this.$message.success('信息已复制到剪贴板');

        // 3秒后自动隐藏成功提示
        setTimeout(() => {
          this.copySuccess = false;
        }, 3000);

      } catch (err) {
        console.error('复制失败:', err);
        this.$message.error('复制失败，请手动选择文本复制');

        // 降级方案：创建临时textarea元素进行复制
        const textarea = document.createElement('textarea');
        textarea.value = texts;
        textarea.style.position = 'fixed';
        document.body.appendChild(textarea);
        textarea.select();

        try {
          document.execCommand('copy');
          this.$message.success('信息已复制到剪贴板');
        } catch (e) {
          this.$message.error('复制失败，请手动选择文本复制');
        } finally {
          document.body.removeChild(textarea);
        }
      }
    }
  }
}
</script>

<template>
  <div>
    <el-dialog
      title="客户信息表"
      width="30%"
      :visible="getShowDeadline"
      center
      @close="SET_SHOW_DEADLINE(false)">

      <ul ref="ulRefClass" class="ul-class">
        <li v-for="(item, key) in getDetails" :key="key">
          {{ key }}：{{ item }}
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="SET_SHOW_DEADLINE(false)">取 消</el-button>
        <el-button
          type="primary"
          @click="copyTextWrite($refs.ulRefClass)"
          :loading="copySuccess">
          {{ copySuccess ? '已复制' : '复制信息' }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped>
.label_class {
  background-color: cornflowerblue;
}

.ul-class {
  width: 100%;
  padding: 15px;
  margin: 0 auto;
  background: linear-gradient(45deg, #e8dddd, #8787a5, #fff);
  border-radius: 4px;
}

.ul-class > li {
  padding: 8px 0;
  font-size: 20px;
  border-bottom: 1px dashed #eee;
}

.ul-class > li:last-child {
  border-bottom: none;
}

.ul-class > li:hover {
  cursor: pointer;
  background-color: #1bb9f8;
}
</style>
